<template>
    <div class="clearfix">
        <a-spin tip="Loading..." :spinning="loading">
            <a-upload list-type="picture-card" :file-list="imgList" name="files" @preview="handlePreview" :customRequest="upload"
                :remove="remove">
                <div v-if="imgList?.length < uploadLength && !onlyShow">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">上传</div>
                </div>
            </a-upload>
            <a-modal width="1200px" :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%;" :src="previewImage" />
            </a-modal>
        </a-spin>
    </div>
</template>

<script>
import api from "@/api/api";
export default {
    name: "upload",
    props: ["uploadLength", "onlyShow", "defImgList"],

    data() {
        return {
            imgList: [],
            previewVisible: false,
            previewImage: "",
            loading:false
        };
    },
    mounted() {
        this.validDefImgList();
    },

    methods: {
        getBase64(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => resolve(reader.result);
                reader.onerror = (error) => reject(error);
            });
        },
        handleCancel() {
            this.previewVisible = false;
        },
        async handlePreview(file) {
            if (!file.url && !file.preview) {
                file.preview = await this.getBase64(file.originFileObj);
            }
            this.previewImage = file.url || file.preview;
            this.previewVisible = true;
        },
        remove(file) {
            this.imgList.forEach((item, i) => {
                if (item.uid === file.uid) {
                    this.imgList.splice(i, 1);
                }
            });
            this.$emit("uploadChange", this.imgList);
        },
        upload({ file }) {
            let formData = new FormData();
            formData.append("file", file);
            this.loading=true
            api.uploadImage(formData).then((res) => {
                this.imgList.push({
                    uid: file.uid,
                    url: res.msg,
                    name: file.name,
                    status: "done",
                    percent: 100,
                });
                this.loading=false
                this.$emit("uploadChange", this.imgList);
            });
        },
        validDefImgList() {
            console.log("defImgList", this.defImgList);
            if (this.defImgList.length > 0 && !this.defImgList.every((item) => item)) {
                return;
            }
            if (this.defImgList) {
                const time = new Date().getTime();
                this.imgList = this.defImgList.map((item, idx) => {
                    return {
                        uid: time + "_" + idx,
                        name: time + "_" + idx,
                        status: "done",
                        percent: 100,
                        url: item,
                    };
                });
            }
        },
    },
};
</script>

<style scoped lang="scss">
.clearfix {
    line-height: 0;
}
</style>
